<template>
  <div class="xq_warp">
    <div
      class="xq_tab"
      v-for="(item, index) in value"
      :key="index"
      :class="active == index + 1 ? 'xq_tab_active' : ''"
      @click="onTab(index, item)"
    >
      {{ item.label }}
    </div>
  </div>
</template>

<script>
export default {
  props: {
    value: {
      type: Array,
      default: () => []
    },
    active: {
      type: String,
      default: "1"
    }
  },

  methods: {
    onTab(index, item) {
      // this.active = index + 1;
      const active = (index + 1).toString();
      this.$emit("update:active", active);
    }
  }
};
</script>

<style lang="scss" scoped>
.xq_warp {
  display: flex;
  .xq_tab {
    cursor: pointer;
    color: #777777;
    padding: 6px 16px;
    margin: 0 8px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
  }
  .xq_tab_active {
    color: var(--primary);
    padding: 6px 16px;
    border-radius: 16px;
    border: 1px solid var(--primary);
    margin: 0 8px;
  }
}
</style>
